<template>
  <div>
    <button @click="isShow = !isShow">显示/隐藏元素</button>

    <transition name="laoli">
      <div class="box" v-show="isShow"></div>
    </transition>
  </div>
</template>

<script>
export default {
  name:"App",
  data() {
    return {
      isShow: true
    };
  },
}
</script>

<style scoped>
  .box {
    width: 200px;
    height: 200px;
    background: pink;
  }
  @keyframes fadeOut{
    50%{
      transform: translateX(50px);
    }
    to{
      opacity: 0;
    }
  }

  @keyframes fadeIn{
    from{
      opacity: 0;
    }
  }
  .laoli-leave-active {
    animation: fadeOut 2s linear;
  }
  .laoli-enter-active {
    animation: fadeIn 2s linear;
  }
</style>